<template>
    <div class="home">
        <div class="content">
            <!-- 头部 -->
            <div class="header">
                <div class="text">奶茶点单专区</div>
                <div class="location">
                    <van-icon name="location-o" />
                    <span>aw</span>
                    <van-icon name="arrow" />
                </div>
            </div>
            <!-- 主要内容 -->
            <div class="main">
                <div class="main-bg">
                    <div class="search">
                        <input type="text" />
                        <div class="search-text" >搜索</div>
                    </div>
                </div>
                <van-tabs v-model:active="active" class="van-tabs">
                    <van-tab v-for="(item,index) in centent_nav_list" :title="item.tab" :key="index">
                    <nav-list :navList="item.data" />
                    </van-tab>
                </van-tabs>

            </div>
        </div>
       <Footer></Footer>
    </div>
</template>

<script>
import Footer from "../../components/Footer.vue";
import {reactive,toRefs,ref} from "vue";
import NavList from './components/NavList.vue'
// import { reactive } from "vue";
export default {
    components:{
        Footer,
        NavList
    },
    setup(){
       let data =reactive({
        centent_nav_list:[
            {
                tab:"天天神券",
                data:[
                    {
                        pic:"https://img2.baidu.com/it/u=2906730111,1647890107&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400",
                        title:"古茗",
                        grade:"4.8分",
                        price:"人均16",
                        label:["大学城奶茶热销榜第2名","yyds!!!"],
                    },
                    {
                        pic:"https://rd5-public.zhaopin.cn/imgs/company/e86384304c13df7f0944601b7a97bbb7.jpg",
                        title:"茶百道",
                        grade:"4.8分",
                        price:"人均15",
                        label:["大学城奶茶热销榜第5名","好吃，赞？"],
                    },
                    {
                        pic:"https://tm-image.tianyancha.com/tm/03ad5882fe02388fb1fedfa7d0c055df.jpg",
                        title:"喜茶",
                        grade:"4.3分",
                        price:"人均19",
                        label:["大学城奶茶热销榜第3名","热心帮忙"],
                    },
                    {
                        pic:"https://pic3.zhimg.com/v2-9a9e0143dd4d0da98ffebd0a6d16f622_r.jpg",
                        title:"蜜雪冰城",
                        grade:"4.9分",
                        price:"人均7",
                        label:["大学城奶茶热销榜第7名","物美价廉"],
                    },
                ],               
            },
            {
                tab:"点评高分",
                data:[
                    {
                        pic:"https://img2.baidu.com/it/u=2906730111,1647890107&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400",
                        title:"古茗",
                        grade:"4.8分",
                        price:"16",
                        label:["大学城奶茶热销榜第2名","被种草了"],
                    },
                    {
                        pic:"https://rd5-public.zhaopin.cn/imgs/company/e86384304c13df7f0944601b7a97bbb7.jpg",
                        title:"茶百道",
                        grade:"4.8分",
                        price:"15",
                        label:["大学城奶茶热销榜第5名","回购好几次了"],
                    },
                    {
                        pic:"https://tm-image.tianyancha.com/tm/03ad5882fe02388fb1fedfa7d0c055df.jpg",
                        title:"喜茶",
                        grade:"4.3分",
                        price:"19",
                        label:["大学城奶茶热销榜第3名","外酥里嫩"],
                    },
                ],               
            },
            {
                tab:"会员商家",
                data:[
                    {
                        pic:"https://img2.baidu.com/it/u=2906730111,1647890107&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400",
                        title:"古茗",
                        grade:"4.8",
                        price:"16",
                        label:["大学城奶茶热销榜第2名","被种草了"],
                    },
                    {
                        pic:"https://rd5-public.zhaopin.cn/imgs/company/e86384304c13df7f0944601b7a97bbb7.jpg",
                        title:"茶百道",
                        grade:"4.8",
                        price:"15",
                        label:["大学城奶茶热销榜第5名","回购好几次了"],
                    },
                    {
                        pic:"https://tm-image.tianyancha.com/tm/03ad5882fe02388fb1fedfa7d0c055df.jpg",
                        title:"喜茶",
                        grade:"4.3",
                        price:"19",
                        label:["大学城奶茶热销榜第3名","外酥里嫩"],
                    },
                ],               
            },
            {
                tab:"减配送费",
                data:[
                    {
                        pic:"https://img2.baidu.com/it/u=2906730111,1647890107&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400",
                        title:"古茗",
                        grade:"4.8",
                        price:"16",
                        label:["大学城奶茶热销榜第2名","被种草了"],
                    },
                    {
                        pic:"https://rd5-public.zhaopin.cn/imgs/company/e86384304c13df7f0944601b7a97bbb7.jpg",
                        title:"茶百道",
                        grade:"4.8",
                        price:"15",
                        label:["大学城奶茶热销榜第5名","回购好几次了"],
                    },
                    {
                        pic:"https://tm-image.tianyancha.com/tm/03ad5882fe02388fb1fedfa7d0c055df.jpg",
                        title:"喜茶",
                        grade:"4.3",
                        price:"19",
                        label:["大学城奶茶热销榜第3名","外酥里嫩"],
                    },
                ],               
            },
        ],
       });
       const active = ref(0)
       return{
        ...toRefs(data),
        active,
       };
    },
};
</script>


<style lang="less" scoped>
.home{
    display: flex;
    flex-flow: column;
    height: 100%;
    font-size: 12px;
    .content{
        flex: 1;
        overflow: auto;
        .header{
            background-image: linear-gradient(#ffc400,#fff);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 20px 40px 20px;
            .text{
                font-size: 20px;
                font-weight: 600;
            }
            .location【
            span{
                margin: 0 5px;

            }
            font-size: 14px;
        };
        .main{
            margin-top: -30px;
            .main-bg{
                background-image: linear-gradient(#fff,#f5f5f5);
                padding: 10px 20px 0px 20px;
                border-radius: 30px 30px 0 0;
                .search{
                position: relative;
                input{
                    width: 100%;
                    border: 1px solid #ffc400;
                    border-radius: 20px;
                    height: 30px;
                }
                .search-text{
                    position: absolute;
                    right: -6px;
                    top: 1px;
                    background-color: #ffc400;
                    border-radius: 16px;
                    width: 50px;
                    height: 32px;
                    line-height: 32px;
                    font-size: 18px;
                    text-align: center;
                }
                }
            }
            .van-tabs{
                padding: 0 20px 10px;
            }

        }

    }
}

/deep/ .van-tabs__wrap{
    border-radius: 10px;
}
</style>